<script setup>
    import { sdCityList } from '@/utils/index'
    import { ElMessage } from 'element-plus'
    import { jobAdd, jobEdit } from '@/common/apis'
    import FormList from '@/components/FormList.vue'

    let dialogVisible = $ref(false)
    let form = $ref({})
    let form1 = $ref({
        s1: '济南市历下区姚家街道办事处社区服务中心',
        s2: '济南市历下区姚家街道总工会'
    })
    let form2 = $ref({})
    let checked1 = $ref(false)

    let showType = $ref('')

    const emit = defineEmits(['addSuccess'])

    const showAddPost = (data, type) => {
        checked1 = false
        if(data.setPost || data.usePost) checked1 = true
        form = JSON.parse(JSON.stringify(data))
        showType = type
        dialogVisible = true
    }

    const formItem = [
        {
            label: '岗位性质',
            value: 'jobNature',
            type: 'select',
            selectData:  ['城镇岗位', '乡村岗位']
        },
        {
            label: '岗位类型',
            value: 'jobGenre',
            type: 'select',
            selectData: ['公共管理类', '公共服务类', '社会事业类', '设施维护类', '社会治理类']
        },
        {
            label: '岗位数量',
            value: 'jobNumb',
        },
        {
            label: '薪资待遇',
            value: 'salary',
        },
        {
            label: '岗位名称',
            value: 'jobName',
        },
        {
            label: '工作内容',
            value: 'jobDetails',
        },
        {
            label: '工作地址',
            value: 'jobAddress',
        },
        {
            label: '工作时长',
            value: 'workHours',
        },
        {
            label: '联系人',
            value: 'linkman',
        },
        {
            label: '联系电话',
            value: 'phone',
        },
    ]

    const formItem1 = [
        {
            label: '设岗单位',
            value: 'setPost',
            type: 'select',
            selectData: ['济南市历下区姚家街道办事处社区服务中心']
        },
        {
            label: '用岗单位',
            value: 'usePost',
            type: 'select',
            selectData: ['济南市历下区姚家街道总工会']
        }
    ]

    const clickRelevancy = () => {
        ElMessage.success('操作成功~')
        emit('addSuccess')
    }

    const changeForm = (v, data) => {
        form[v] = data
    }

    const handleClick = () => {
        let api = jobAdd
        if(form.id) api = jobEdit

        if(!checked1){
            form.setPost = ''
            form.usePost = ''
        }

        api(form).then(res => {
            if(res.success){
                ElMessage.success('操作成功~')
                dialogVisible = false
                emit('addSuccess')
            }else{
                ElMessage.error(res.message)
            }
        })
    }

    defineExpose({
        showAddPost
    })

</script>

<template>
    <el-dialog
        v-model="dialogVisible"
        :title="showType == 'edit' ? '修改' : showType == 'add' ? '新增' : '详情'"
        custom-class="zz-dialog basic-info-dialog"
        width="880px"
        v-if="dialogVisible"
    >	
        <form-list :list="formItem" :formData="form" :type="showType" @changeForm="changeForm"></form-list>
    
    
        <div class="relevancy">
            <el-checkbox v-model="checked1" label="关联设岗单位与用岗单位" size="large" />
            <template v-if="checked1">
                <!-- <div class="relevancy-list flex-center">
                    <span>设岗单位</span>
                    <span>用岗单位</span>
                </div> -->
                <form-list :list="formItem1" :formData="form" type="add" @changeForm="changeForm"></form-list>
                <!-- <div class="flex">
                    <form-list :list="formItem1" :formData="form2" type="add"></form-list>
                </div> -->
            </template>
        </div>

        <template #footer v-if="showType != 'details'">
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleClick">
                    确定
                </el-button>
            </span>
        </template>
        <template #footer v-if="showType == 'details' && checked1">
            <span class="dialog-footer">
                <el-button type="primary" @click="handleClick()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<style lang="less">
    .basic-info-dialog{
        .el-checkbox{
            padding: 20px 40px;
        }
        .el-checkbox.el-checkbox--large .el-checkbox__label{
            font-size: 16px;
        }
        .el-checkbox.el-checkbox--large .el-checkbox__inner{
            width: 18px;
            height: 18px;
            border-color: #fff !important;
        }

        .el-checkbox__input.is-checked .el-checkbox__inner::after{
            margin: 2px;
        }

        .relevancy{
            .relevancy-list{
                font-size: 18px;
                color: #fff;
                font-weight: bold;

                span{
                    flex: 1;
                    text-align: center;
                    padding: 20px;
                }
            }
        }
    }
</style>